<template>
	<view class="box">
		<view class="store_mess">
			<view class="list_item" @click="gotoStore">
				<view class="img">
					<image :src="imageurl + shoppdata.image" mode=""></image>
				</view>
				<view class="list_content">
					<text class="shopName">{{shoppdata.name}}</text>
					<text>营业时间：{{shoppdata.businessTime}}</text>
					<text class="Grade">{{shoppdata.level}}</text>
					<text class="address">{{shoppdata.detailAddress}}</text>
					<text>联系电话：{{shoppdata.contactPhone}}</text>
				</view>
				<view class="distance">
					{{shoppdata.distance}}km
				</view>
			</view>
		</view>
		<view class="sotreSwip">
			<text>门店介绍</text>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in shoppdata.imagesInfo" :key="index">
					<view class="swiper-item">
						<image :src="imageurl + item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="storeMap">
			<text>地图</text>
			<view class="map">
				<map :latitude="shoppdata.latitude" :longitude="shoppdata.longitude" :markers="covers"></map>
			</view>
		</view>
		<view class="appointment" @click="toyuyue">
			去预约
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shoppdata: {},
				covers: [{
					latitude: '',
					longitude: '',
					iconPath: '',
					width:30,
					height:30,
				}],
				imageurl:this.$imgurl,
			}
		},
		onLoad(option) {
			console.log('页面携带参数', option)
			var data = JSON.parse(option.data)
			this.getshoppdata(data)
		},
		methods: {
			//获取店铺信息
			getshoppdata(data) {
				console.log(5555555, data)
				var that = this
				that.$http('/api/user/store/details', 'POST', data).then((res) => {
					console.log('返回参数', res.data.data)
					
					
					res.data.data.imagesInfo = JSON.parse(res.data.data.imagesInfo)
					that.shoppdata = res.data.data
					that.covers[0].latitude = res.data.data.latitude
					that.covers[0].longitude = res.data.data.longitude
					that.covers[0].iconPath = that.imageurl + res.data.data.image
				})
			},
			//去预约
			toyuyue() {
				console.log('看看',this.shoppdata)
				
				// return false
				uni.navigateTo({
					url: "../chooseTime/chooseTime?id=" + this.shoppdata.id
				})
			},
		}
	}
</script>

<style lang="scss">
	.box {
		width: 750rpx;
		height: 100%;
		position: relative;

		.store_mess {
			width: 750rpx;
			height: 210rpx;
			border-bottom: 2px solid #eee;

			.list_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10rpx;
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				box-sizing: border-box;

				.list_content {
					display: flex;
					flex-direction: column;
					justify-content: center;
					line-height: 35rpx;

					.shopName {
						font-weight: bold;
						font-size: 30rpx;
					}

					.Grade {
						width: 104rpx;
						height: 40rpx;
						background-color: #f49c1c;
						color: #FFFFFF;
						border-radius: 50rpx;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.img {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
			}

		}

		.sotreSwip {
			width: 750rpx;
			margin-top: 20rpx;
			.swiper-item{
				width: 100%;
				height: 300rpx;
			}
			text {
				font-size: 25rpx;
				font-weight: bold;
				margin-left: 50rpx;
			}

			swiper {
				width: 650rpx;
				margin: 20rpx auto;
			}
		}

		.storeMap {
			text {
				padding: 20rpx;
			}

			.map {
				padding: 20rpx;

				map {
					width: 100%;
					margin: 10rpx auto;
					border-radius: 20rpx;
				}
			}
		}

		.appointment {
			width: 70%;
			height: 80rpx;
			background-color: #f49c1c;
			border-radius: 20rpx;
			color: #FFFFFF;
			margin: 20rpx auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
